import React, { useEffect, useState } from 'react'
import { IRouteComponentProps } from "umi"
import "./file.less"
import { IfileList } from "../../utils/interface"
import moment from "moment"
import { useSelector, useDispatch } from "umi"
const mail: React.FC<IRouteComponentProps> = props => {
    const state = useSelector((state: { mail: any }) => state.mail)
    const dispatch = useDispatch()
    let [from, setForm] = useState("")
    let [to, setTo] = useState("")
console.log(state.fileList);

    useEffect(() => {
        dispatch({
            type: "mail/file",
            //   payload: { from, to }   
        })

    }, [])
    function search(from: string, to: string) {
        console.log(from, to);

        dispatch({
            type: "mail/file",
            // payload: { from, to }

        })
    }
    return <div className="box">
        <div className="header">
            <div className="top">
                <span>文件名称：<input type="text" placeholder="请输入发件人" value={from} onChange={e => { setForm(e.target.value) }} /></span>
                <span>文件类型：<input type="text" placeholder="请输入收件人" value={to} onChange={e => { setTo(e.target.value) }} /></span>
            </div>
            <div className="botton">
                <div className="kong"></div>
                <button className="search" onClick={() => { search(from, to) }}>搜索</button>
                <button onClick={() => { setForm(""), setTo("") }}>重置</button>
            </div>
        </div>

        <div className="main">
            {
                state.fileList.map((item: IfileList) => {
                    return <dl key={item.id}>
                        <dt><img src={item.url} alt="" /></dt>
                        <dd>
                            <p className="title">{item.originalname}</p>
                            <p>上传于{moment(item.createAt).format('YYYY-MM-DD h:mm:ss')}</p>
                        </dd>
                    </dl>
                })
            }

        </div>
    </div>


};
export default mail

